var imageUploader = {
        init: function () {
            this.effect  = 1;
            this.imgPath = this.webroot+'/img';
            //this.url     = this.webroot+'/uploadImage.aux.php';
            this.url     = this.webroot+'/cmsImages/upload';
        },

        open: function (name, webroot) {
            if ($('div_'+name)) { // DOM already created
                return;
            }

            this.name    = name;
            this.webroot = webroot;
            this.init();

            var def = $(name).style.backgroundImage;
            var len = def.length - 5;
                def = def.substr(4, len);
            var tpl = '<div id="div_'+name+'" class="abs" style="display:none; background-color:#FFF8CC; border-top:1px solid #EBAE7F; padding:5px; z-index:1;">'+
                        '<div class="arrowUp"></div>'+
                        '<span id="txt_'+name+'">Select an image file on your computer</span>'+
                        '<form id="form_'+name+'" enctype="multipart/form-data" method="post" action="'+this.url+'">'+
                          '<input type="file" id="image_'+name+'" name="image_'+name+'" value="" onchange="imageUploader.upload(\''+name+'\')" />'+
                          '<input type="hidden" name="itag" value="'+name+'" />'+
                          '<input type="hidden" id="defaultImage" name="defaultImage" value="'+def+'" />'+
                          '<input type="hidden" id="iWidth" name="iWidth" value="" />'+
                          '<input type="hidden" id="iHeight" name="iHeight" value="" />'+
                          '<div>'+
                            '<div class="ico_restore" style="float:left; cursor:pointer;" onclick="imageUploader.restore(\''+name+'\')">Restore</div>'+
                            '<div class="ico_delete" style="float:right; cursor:pointer;" onclick="imageUploader.kill(\'div_'+name+'\')">close</div>'+
                          '</div>'+
                        '</form>'+
                      '</div>';
            var width  = $(name).getWidth();
            var height = $(name).getHeight();

            $(name).insert(tpl);

            var tWidth = $('div_'+name).getWidth();
            var offset = (width - tWidth) / 2;

            $('div_'+name).setStyle({ top:(height-5)+'px', left:offset+'px' });
            $('iWidth').value  = width;
            $('iHeight').value = height;

            if (this.effect) {
                new Effect.Appear('div_'+name, { duration:0.8 });
                new Effect.Grow('div_'+name, { duration:0.5 });
            } else {
                $('div_'+name).show();
            }
        },

        upload: function (elem) {
            if (!$F('image_'+elem)) {
                window.effect = new Effect.Pulsate('uploadImage', {
                    afterUpdate: function(o) {
                        if (o.currentFrame > 120) { window.effect.cancel(); }
                    },
                    afterFinish: function() {
                        $('image_'+elem).focus();
                    }
                });
                return false;
            }

            AIM.submit($('form_'+elem), { 'onComplete':this.complete });
            $('form_'+elem).submit();

            $('txt_'+elem).update('uploading..').setStyle({ color:'gray' });
            $('image_'+elem).remove();
            $('form_'+elem).insert({ top:'<div id="loading_'+elem+'" class="uploadBar"></div>' });
            $('form_'+elem).down('div.ico_restore').hide();
            //setTimeout("imageUploader.complete('"+elem+"')", 3000);

            if (this.effect) {
                new Effect.Pulsate('txt_'+elem);
            }
        },

        complete: function (response) {
            var json = response.evalJSON();
            var elem = json.itag;

            //alert(response);
            $('loading_'+elem).remove();

            if (json.status != 1) {
                var err = (json.message) ? json.message : 'Fail upload image, please try again..';
                imageUploader._failure(elem, err);
                return false;
            } else if (json.status == 1) {
                var msg = (json.message) ? json.message : 'image uploaded successfully!';
                $('txt_'+elem).update(msg).setStyle({ color:'green' });
                setTimeout("imageUploader.kill('div_"+elem+"')", 3000);

                if (json.filename) {
                    $(elem).setStyle({ backgroundImage:'url('+imageUploader.imgPath+'/'+json.filename+')' });
                }
                if (imageUploader.effect) {
                    //$(imageUploader.name).hide();
                    new Effect.BlindDown(imageUploader.name, { duration: 0.5 });
                    new Effect.Highlight('txt_'+elem);
                }
                //location.reload(true);
            }
        },

        restore: function (elem) {
            new Ajax.Request(this.webroot+'/cmsImages/restore/'+elem, {
                method: 'post',
                parameters: { current:$F('defaultImage') },
                onLoading: function() {
                    $('txt_'+elem).update('restoring..').setStyle({ color:'gray' });
                    $('image_'+elem).remove();
                    $('form_'+elem).insert({ top:'<div id="loading_'+elem+'" class="uploadBar"></div>' });
                    $('form_'+elem).down('div.ico_restore').hide();
                },
                onFailure: function() {
                    imageUploader._failure(elem, 'Restore failure, please try again..');
                },
                onComplete: function() {
                    $('loading_'+elem).remove();
                },
                onSuccess: function(transport) {
                    var json = transport.responseText.evalJSON();
                    if (json && json.status == -1) {
                        var err = (json.message) ? json.message : 'Restore failure, please try again..';
                        imageUploader._failure(elem, err);
                    } else if (json && json.status == 1) {
                        var msg = (json.message) ? json.message : 'image restored successfully!';
                        $('txt_'+elem).update(msg).setStyle({ color:'green' });
                        setTimeout("imageUploader.kill('div_"+elem+"')", 3000);

                        if (json.original) {
                            $(elem).setStyle({ backgroundImage:'url('+json.original+')' });
                        }
                        if (imageUploader.effect) {
                            new Effect.BlindDown(elem, { duration: 0.5 });
                            new Effect.Highlight('txt_'+elem);
                        }
                    }
                }
            });
        },

        kill: function (elem) {
            if (this.effect) {
                new Effect.DropOut(elem, { afterFinish:function(){
                    $(elem).remove();
                } });
            } else {
                $(elem).remove();
            }
        },

        _failure: function (elem, err) {
            $('txt_'+elem).update(err).setStyle({ color:'red' });
            $('form_'+elem).insert({
                top:'<input type="file" id="image_'+elem+'" name="image_'+elem+'" value="" onchange="imageUploader.upload(\''+elem+'\')" />'
            });
            $('form_'+elem).down('div.ico_restore').show();

            if (this.effect) {
                window.effect = new Effect.Pulsate('txt_'+elem, {
                    delay: 0.5,
                    afterUpdate: function(o) {
                        if (o.currentFrame > 120) {
                            window.effect.cancel();
                        }
                    }
                });
            }
        }
};